<template>
  <div class="product-block" :style="customStyle">
    <div class="heading">
      <div class="title">{{ title }}</div>
      <div class="desc" @click="$emit('arrow')">
        {{ desc }}
        <van-icon name="arrow" color="#999999" size="15" :style="{ marginLeft: '4px' }" />
      </div>
    </div>

    <div class="content">
      <template v-if="isRow">
        <component
          v-for="item in array"
          :key="item.id"
          :is="mode"
          :border="border"
          :title="item.title"
          :desc="item.type"
          :cover="item.cover"
          :star="Number(item.star)"
          :read="item.read"
          :hot="item.hot"
          @click.native="onClick(item)"
        />
      </template>

      <template v-if="isCol">
        <van-swipe indicator-color="#333333" :width="320" :style="{ margin: '0 17px' }">
          <van-swipe-item v-for="(item, index) in array" :key="item.id">
            <component
              :is="mode"
              :border="border"
              :color="colors[index % 3]"
              :title="item.title"
              :desc="item.type"
              :cover="item.cover"
              :star="Number(item.star)"
              :read="item.read"
              :tags="item.tags"
              :hot="item.hot"
              @click.native="onClick(item)"
            />
          </van-swipe-item>
        </van-swipe>

        <div :style="{ height: '30px' }" />
      </template>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Swipe, SwipeItem } from 'vant'
import RowImage from './RowImage'
import RowText from './RowText'
import ColButton from './ColButton'
import ColText from './ColText'

Vue.use(Icon)
  .use(Swipe)
  .use(SwipeItem)

const colors = ['blue', 'yellow']

export default {
  props: {
    title: {
      type: String,
      default: ''
    },

    desc: {
      type: String,
      default: ''
    },

    mode: {
      type: String,
      required: true,
      validator: e =>
        ['row-image', 'row-text', 'col-button', 'col-text'].includes(e)
    },

    border: {
      type: Boolean,
      default: true
    },

    customStyle: {
      type: Object,
      default: () => ({})
    }
  },

  components: {
    RowImage,
    RowText,
    ColButton,
    ColText
  },

  data() {
    return {
      array: [
        {
          id: 0,
          cover: '',
          title: '职业规划初始课程',
          read: '3.8',
          star: '4',
          type: '就业 ｜ 应届',
          tags: ['特点标签', '标签', '6个字的标签']
        },
        {
          id: 1,
          cover: '',
          title: '职业规划初始课程',
          read: '3.8',
          star: '4',
          type: '就业 ｜ 应届',
          hot: true,
          tags: ['特点标签', '标签', '6个字的标签']
        }
      ],
      colors
    }
  },

  computed: {
    isRow() {
      return this.mode.indexOf('row') > -1
    },

    isCol() {
      return this.mode.indexOf('col') > -1
    }
  },

  methods: {
    onClick(e) {
      this.$emit('select', e)
    }
  }
}
</script>

<style lang="less" scoped>
.product-block {
  background-color: #ffffff;

  /deep/ .van-swipe__indicator {
    background-color: #666666;
    width: 15px;
    height: 2px;
    border-radius: 2.75px;
  }

  /deep/ .van-swipe__indicators {
    bottom: 15px;
  }

  .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 17.5px;

    .title {
      font-size: 16px;
      color: #222222;
      font-weight: 500;
    }

    .desc {
      color: #999999;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
  }
}
</style>